<template>
    <div class="platform-content">
        <h4 class="platform-content-title">
            <span>志愿者团队数据表</span>
            <div class="platform-list-op">
                <el-button
                        v-permission="'fetchdata.spider.volunteer.team.create'"
                        size="small"
                        type="primary"
                        @click="openCreate"
                >
                    新建
                </el-button>
                <el-button
                        size="mini"
                        type="success"
                        @click="changeSearch"
                >
                    收起/展开
                </el-button>
            </div>
        </h4>
        <div class="platform-content-info">
            <el-row>
                <el-form
                        ref="searchForm"
                        :inline="true"
                        :model="pageData"
                        class="platform-content-search-form-more"
                >
                    <el-row v-if="showSearch">
                                                <el-col :span="6">
                            <el-form-item label="队伍名称">
                                <el-input
                                        v-model="pageData.teamname"
                                        placeholder="队伍名称"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="服务区域">
                                <el-input
                                        v-model="pageData.servicearea"
                                        placeholder="服务区域"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="服务类别">
                                <el-input
                                        v-model="pageData.servicetype"
                                        placeholder="服务类别"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="单位类型">
                                <el-input
                                        v-model="pageData.unittype"
                                        placeholder="单位类型"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="队伍联系人姓名">
                                <el-input
                                        v-model="pageData.contactname"
                                        placeholder="队伍联系人姓名"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="队伍联系人电话">
                                <el-input
                                        v-model="pageData.landlinephone"
                                        placeholder="队伍联系人电话"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="队伍联系人手机">
                                <el-input
                                        v-model="pageData.contactphone"
                                        placeholder="队伍联系人手机"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="队伍联系人邮箱">
                                <el-input
                                        v-model="pageData.contactemail"
                                        placeholder="队伍联系人邮箱"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="队伍地址">
                                <el-input
                                        v-model="pageData.address"
                                        placeholder="队伍地址"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="省">
                                <el-input
                                        v-model="pageData.province"
                                        placeholder="省"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="市">
                                <el-input
                                        v-model="pageData.city"
                                        placeholder="市"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="区县">
                                <el-input
                                        v-model="pageData.district"
                                        placeholder="区县"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="乡镇">
                                <el-input
                                        v-model="pageData.street"
                                        placeholder="乡镇"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="详细地址">
                                <el-input
                                        v-model="pageData.detailedaddress"
                                        placeholder="详细地址"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="详细地址经度">
                                <el-input
                                        v-model="pageData.longitude"
                                        placeholder="详细地址经度"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="详细地址维度">
                                <el-input
                                        v-model="pageData.latitude"
                                        placeholder="详细地址维度"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="人员规模">
                                <el-input
                                        v-model="pageData.scale"
                                        placeholder="人员规模"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="正式人员">
                                <el-input
                                        v-model="pageData.officialstaff"
                                        placeholder="正式人员"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="队伍登记日期">
                                <el-input
                                        v-model="pageData.registrationdate"
                                        placeholder="队伍登记日期"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="队伍联络编号">
                                <el-input
                                        v-model="pageData.contactnumber"
                                        placeholder="队伍联络编号"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="加入方式">
                                <el-input
                                        v-model="pageData.howjoin"
                                        placeholder="加入方式"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="成立日期">
                                <el-input
                                        v-model="pageData.establishmentdate"
                                        placeholder="成立日期"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="联络组织">
                                <el-input
                                        v-model="pageData.contactorganization"
                                        placeholder="联络组织"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="登记机关">
                                <el-input
                                        v-model="pageData.registrationauthority"
                                        placeholder="登记机关"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="队伍简介">
                                <el-input
                                        v-model="pageData.teamprofile"
                                        placeholder="队伍简介"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="发起项目名称">
                                <el-input
                                        v-model="pageData.projectname"
                                        placeholder="发起项目名称"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="创建日期时间戳">
                                <el-input
                                        v-model="pageData.createdate"
                                        placeholder="创建日期时间戳"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6" style="float:right;">
                            <div class="platform-content-search-op-more">
                                <el-button
                                        size="small"
                                        @click="doReSearch"
                                >
                                    重 置
                                </el-button>
                                <el-button
                                        size="small"
                                        type="primary"
                                        @click="doSearch"
                                >
                                    查 询
                                </el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
            <div class="platform-content-list">
                <div class="platform-content-list-table">
                    <el-table
                            v-loading="listLoading"
                            :data="listData"
                            stripe
                            @sort-change="doPageSort"
                    >
                                                    <el-table-column
                                    prop="teamname"
                                    label="队伍名称"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="servicearea"
                                    label="服务区域"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="servicetype"
                                    label="服务类别"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="unittype"
                                    label="单位类型"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="contactname"
                                    label="队伍联系人姓名"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="landlinephone"
                                    label="队伍联系人电话"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="contactphone"
                                    label="队伍联系人手机"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="contactemail"
                                    label="队伍联系人邮箱"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="address"
                                    label="队伍地址"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="province"
                                    label="省"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="city"
                                    label="市"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="district"
                                    label="区县"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="street"
                                    label="乡镇"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="detailedaddress"
                                    label="详细地址"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="longitude"
                                    label="详细地址经度"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="latitude"
                                    label="详细地址维度"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="scale"
                                    label="人员规模"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="officialstaff"
                                    label="正式人员"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="registrationdate"
                                    label="队伍登记日期"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="contactnumber"
                                    label="队伍联络编号"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="howjoin"
                                    label="加入方式"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="establishmentdate"
                                    label="成立日期"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="contactorganization"
                                    label="联络组织"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="registrationauthority"
                                    label="登记机关"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="teamprofile"
                                    label="队伍简介"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="projectname"
                                    label="发起项目名称"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="createdate"
                                    label="创建日期时间戳"
                                    sortable
                            />
                                                <el-table-column
                                fixed="right"
                                header-align="center"
                                align="center"
                                label="操作"
                                width="180"
                        >
                            <template slot-scope="scope">
                                <el-button
                                        v-permission="'fetchdata.spider.volunteer.team'"
                                        type="text"
                                        size="small"
                                        @click.native.prevent="openShow(scope.row)"
                                >
                                    详情
                                </el-button>
                                <el-button
                                        v-permission="'fetchdata.spider.volunteer.team.update'"
                                        type="text"
                                        size="small"
                                        @click.native.prevent="openUpdate(scope.row)"
                                >
                                    修改
                                </el-button>
                                <el-button
                                        v-permission="'fetchdata.spider.volunteer.team.delete'"
                                        type="text"
                                        size="small"
                                        class="button-delete-color"
                                        @click.native.prevent="openDelete(scope.row)"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="platform-content-list-pagination">
                    <el-pagination
                            :current-page="pageData.pageNo"
                            :page-size="pageData.pageSize"
                            :total="pageData.totalCount"
                            class="platform-pagenation"
                            background
                            :page-sizes="[10, 20, 30, 50]"
                            layout="sizes, prev, pager, next"
                            @current-change="doChangePage"
                            @size-change="doSizeChange"
                    />
                </div>
            </div>
        </div>

        <el-dialog
                title="新建"
                :visible.sync="createDialogVisible"
                :close-on-click-modal="false"
                width="50%"
        >
            <el-form
                    ref="createForm"
                    :model="formData"
                    :rules="formRules"
                    size="small"
                    label-width="120px"
            >
                                    <el-form-item
                            prop="teamname"
                            label="队伍名称"
                    >
                        <el-input
                                v-model="formData.teamname"
                                maxlength="100"
                                placeholder="队伍名称"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="servicearea"
                            label="服务区域"
                    >
                        <el-input
                                v-model="formData.servicearea"
                                maxlength="100"
                                placeholder="服务区域"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="servicetype"
                            label="服务类别"
                    >
                        <el-input
                                v-model="formData.servicetype"
                                maxlength="100"
                                placeholder="服务类别"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="unittype"
                            label="单位类型"
                    >
                        <el-input
                                v-model="formData.unittype"
                                maxlength="100"
                                placeholder="单位类型"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="contactname"
                            label="队伍联系人姓名"
                    >
                        <el-input
                                v-model="formData.contactname"
                                maxlength="100"
                                placeholder="队伍联系人姓名"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="landlinephone"
                            label="队伍联系人电话"
                    >
                        <el-input
                                v-model="formData.landlinephone"
                                maxlength="100"
                                placeholder="队伍联系人电话"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="contactphone"
                            label="队伍联系人手机"
                    >
                        <el-input
                                v-model="formData.contactphone"
                                maxlength="100"
                                placeholder="队伍联系人手机"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="contactemail"
                            label="队伍联系人邮箱"
                    >
                        <el-input
                                v-model="formData.contactemail"
                                maxlength="100"
                                placeholder="队伍联系人邮箱"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="address"
                            label="队伍地址"
                    >
                        <el-input
                                v-model="formData.address"
                                maxlength="100"
                                placeholder="队伍地址"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="province"
                            label="省"
                    >
                        <el-input
                                v-model="formData.province"
                                maxlength="100"
                                placeholder="省"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="city"
                            label="市"
                    >
                        <el-input
                                v-model="formData.city"
                                maxlength="100"
                                placeholder="市"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="district"
                            label="区县"
                    >
                        <el-input
                                v-model="formData.district"
                                maxlength="100"
                                placeholder="区县"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="street"
                            label="乡镇"
                    >
                        <el-input
                                v-model="formData.street"
                                maxlength="100"
                                placeholder="乡镇"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="detailedaddress"
                            label="详细地址"
                    >
                        <el-input
                                v-model="formData.detailedaddress"
                                maxlength="100"
                                placeholder="详细地址"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="longitude"
                            label="详细地址经度"
                    >
                        <el-input
                                v-model="formData.longitude"
                                maxlength="100"
                                placeholder="详细地址经度"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="latitude"
                            label="详细地址维度"
                    >
                        <el-input
                                v-model="formData.latitude"
                                maxlength="100"
                                placeholder="详细地址维度"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="scale"
                            label="人员规模"
                    >
                        <el-input
                                v-model="formData.scale"
                                maxlength="100"
                                placeholder="人员规模"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="officialstaff"
                            label="正式人员"
                    >
                        <el-input
                                v-model="formData.officialstaff"
                                maxlength="100"
                                placeholder="正式人员"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="registrationdate"
                            label="队伍登记日期"
                    >
                        <el-input
                                v-model="formData.registrationdate"
                                maxlength="100"
                                placeholder="队伍登记日期"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="contactnumber"
                            label="队伍联络编号"
                    >
                        <el-input
                                v-model="formData.contactnumber"
                                maxlength="100"
                                placeholder="队伍联络编号"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="howjoin"
                            label="加入方式"
                    >
                        <el-input
                                v-model="formData.howjoin"
                                maxlength="100"
                                placeholder="加入方式"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="establishmentdate"
                            label="成立日期"
                    >
                        <el-input
                                v-model="formData.establishmentdate"
                                maxlength="100"
                                placeholder="成立日期"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="contactorganization"
                            label="联络组织"
                    >
                        <el-input
                                v-model="formData.contactorganization"
                                maxlength="100"
                                placeholder="联络组织"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="registrationauthority"
                            label="登记机关"
                    >
                        <el-input
                                v-model="formData.registrationauthority"
                                maxlength="100"
                                placeholder="登记机关"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="teamprofile"
                            label="队伍简介"
                    >
                        <el-input
                                v-model="formData.teamprofile"
                                maxlength="100"
                                placeholder="队伍简介"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="projectname"
                            label="发起项目名称"
                    >
                        <el-input
                                v-model="formData.projectname"
                                maxlength="100"
                                placeholder="发起项目名称"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="createdate"
                            label="创建日期时间戳"
                    >
                        <el-input
                                v-model="formData.createdate"
                                maxlength="100"
                                placeholder="创建日期时间戳"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="createDialogVisible = false">取 消</el-button>
        <el-button
                size="small"
                type="primary"
                :loading="btnLoading"
                @click="doCreate"
        >确 定</el-button>
      </span>
        </el-dialog>
        <el-dialog
                title="查看详情"
                :visible.sync="showDialogVisible"
                :close-on-click-modal="false"
                width="50%"
        >
            <el-descriptions class="margin-top" colon="false" direction="horizontal" :column="1" :size="size" border="false">
                                    <el-descriptions-item>
                        <template slot="label">
                            队伍名称
                        </template>
                        {{formData.teamname}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            服务区域
                        </template>
                        {{formData.servicearea}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            服务类别
                        </template>
                        {{formData.servicetype}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            单位类型
                        </template>
                        {{formData.unittype}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            队伍联系人姓名
                        </template>
                        {{formData.contactname}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            队伍联系人电话
                        </template>
                        {{formData.landlinephone}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            队伍联系人手机
                        </template>
                        {{formData.contactphone}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            队伍联系人邮箱
                        </template>
                        {{formData.contactemail}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            队伍地址
                        </template>
                        {{formData.address}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            省
                        </template>
                        {{formData.province}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            市
                        </template>
                        {{formData.city}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            区县
                        </template>
                        {{formData.district}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            乡镇
                        </template>
                        {{formData.street}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            详细地址
                        </template>
                        {{formData.detailedaddress}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            详细地址经度
                        </template>
                        {{formData.longitude}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            详细地址维度
                        </template>
                        {{formData.latitude}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            人员规模
                        </template>
                        {{formData.scale}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            正式人员
                        </template>
                        {{formData.officialstaff}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            队伍登记日期
                        </template>
                        {{formData.registrationdate}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            队伍联络编号
                        </template>
                        {{formData.contactnumber}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            加入方式
                        </template>
                        {{formData.howjoin}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            成立日期
                        </template>
                        {{formData.establishmentdate}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            联络组织
                        </template>
                        {{formData.contactorganization}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            登记机关
                        </template>
                        {{formData.registrationauthority}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            队伍简介
                        </template>
                        {{formData.teamprofile}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            发起项目名称
                        </template>
                        {{formData.projectname}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            创建日期时间戳
                        </template>
                        {{formData.createdate}}
                    </el-descriptions-item>
                            </el-descriptions>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="showDialogVisible = false">关 闭</el-button>
      </span>
        </el-dialog>
        <el-dialog
                title="修改分类"
                :visible.sync="updateDialogVisible"
                :close-on-click-modal="false"
                width="50%"
        >
            <el-form
                    ref="updateForm"
                    :model="formData"
                    :rules="formRules"
                    size="small"
                    label-width="120px"
            >
                                    <el-form-item
                            prop="teamname"
                            label="队伍名称"
                    >
                        <el-input
                                v-model="formData.teamname"
                                maxlength="100"
                                placeholder="队伍名称"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="servicearea"
                            label="服务区域"
                    >
                        <el-input
                                v-model="formData.servicearea"
                                maxlength="100"
                                placeholder="服务区域"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="servicetype"
                            label="服务类别"
                    >
                        <el-input
                                v-model="formData.servicetype"
                                maxlength="100"
                                placeholder="服务类别"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="unittype"
                            label="单位类型"
                    >
                        <el-input
                                v-model="formData.unittype"
                                maxlength="100"
                                placeholder="单位类型"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="contactname"
                            label="队伍联系人姓名"
                    >
                        <el-input
                                v-model="formData.contactname"
                                maxlength="100"
                                placeholder="队伍联系人姓名"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="landlinephone"
                            label="队伍联系人电话"
                    >
                        <el-input
                                v-model="formData.landlinephone"
                                maxlength="100"
                                placeholder="队伍联系人电话"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="contactphone"
                            label="队伍联系人手机"
                    >
                        <el-input
                                v-model="formData.contactphone"
                                maxlength="100"
                                placeholder="队伍联系人手机"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="contactemail"
                            label="队伍联系人邮箱"
                    >
                        <el-input
                                v-model="formData.contactemail"
                                maxlength="100"
                                placeholder="队伍联系人邮箱"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="address"
                            label="队伍地址"
                    >
                        <el-input
                                v-model="formData.address"
                                maxlength="100"
                                placeholder="队伍地址"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="province"
                            label="省"
                    >
                        <el-input
                                v-model="formData.province"
                                maxlength="100"
                                placeholder="省"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="city"
                            label="市"
                    >
                        <el-input
                                v-model="formData.city"
                                maxlength="100"
                                placeholder="市"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="district"
                            label="区县"
                    >
                        <el-input
                                v-model="formData.district"
                                maxlength="100"
                                placeholder="区县"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="street"
                            label="乡镇"
                    >
                        <el-input
                                v-model="formData.street"
                                maxlength="100"
                                placeholder="乡镇"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="detailedaddress"
                            label="详细地址"
                    >
                        <el-input
                                v-model="formData.detailedaddress"
                                maxlength="100"
                                placeholder="详细地址"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="longitude"
                            label="详细地址经度"
                    >
                        <el-input
                                v-model="formData.longitude"
                                maxlength="100"
                                placeholder="详细地址经度"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="latitude"
                            label="详细地址维度"
                    >
                        <el-input
                                v-model="formData.latitude"
                                maxlength="100"
                                placeholder="详细地址维度"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="scale"
                            label="人员规模"
                    >
                        <el-input
                                v-model="formData.scale"
                                maxlength="100"
                                placeholder="人员规模"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="officialstaff"
                            label="正式人员"
                    >
                        <el-input
                                v-model="formData.officialstaff"
                                maxlength="100"
                                placeholder="正式人员"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="registrationdate"
                            label="队伍登记日期"
                    >
                        <el-input
                                v-model="formData.registrationdate"
                                maxlength="100"
                                placeholder="队伍登记日期"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="contactnumber"
                            label="队伍联络编号"
                    >
                        <el-input
                                v-model="formData.contactnumber"
                                maxlength="100"
                                placeholder="队伍联络编号"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="howjoin"
                            label="加入方式"
                    >
                        <el-input
                                v-model="formData.howjoin"
                                maxlength="100"
                                placeholder="加入方式"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="establishmentdate"
                            label="成立日期"
                    >
                        <el-input
                                v-model="formData.establishmentdate"
                                maxlength="100"
                                placeholder="成立日期"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="contactorganization"
                            label="联络组织"
                    >
                        <el-input
                                v-model="formData.contactorganization"
                                maxlength="100"
                                placeholder="联络组织"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="registrationauthority"
                            label="登记机关"
                    >
                        <el-input
                                v-model="formData.registrationauthority"
                                maxlength="100"
                                placeholder="登记机关"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="teamprofile"
                            label="队伍简介"
                    >
                        <el-input
                                v-model="formData.teamprofile"
                                maxlength="100"
                                placeholder="队伍简介"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="projectname"
                            label="发起项目名称"
                    >
                        <el-input
                                v-model="formData.projectname"
                                maxlength="100"
                                placeholder="发起项目名称"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="createdate"
                            label="创建日期时间戳"
                    >
                        <el-input
                                v-model="formData.createdate"
                                maxlength="100"
                                placeholder="创建日期时间戳"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="updateDialogVisible = false">取 消</el-button>
        <el-button
                size="small"
                type="primary"
                :loading="btnLoading"
                @click="doUpdate"
        >确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_LIST,
        API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_CREATE,
        API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_DELETE,
        API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_UPDATE,
        API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_GET
    } from '@/constant/api/fetchdata/spider/volunteer/team'
    export default {
        middleware: ['authenticated', 'check_permissions'],
        data() {
            return {
                loading: true,
                btnLoading: false,
                listLoading: false,
                createDialogVisible: false,
                updateDialogVisible: false,
                showDialogVisible: false,
                showSearch: false,
                listData: [],
                pageData: {
                    pageNo: 1,
                    pageSize: 10,
                    totalCount: 0,
                    pageOrderName: 'createdAt',
                    pageOrderBy: 'descending'
                },
                formData: {
                },
                editData: {
                }
            }
        },
        computed: {
            // 表单验证,写在computed里切换多语言才会更新
            formRules() {
                const formRules = {
                                                teamname: [
                            {
                                required: false,
                                message: '队伍名称',
                                trigger: 'blur'
                            }
                        ],
                                                servicearea: [
                            {
                                required: false,
                                message: '服务区域',
                                trigger: 'blur'
                            }
                        ],
                                                servicetype: [
                            {
                                required: false,
                                message: '服务类别',
                                trigger: 'blur'
                            }
                        ],
                                                unittype: [
                            {
                                required: false,
                                message: '单位类型',
                                trigger: 'blur'
                            }
                        ],
                                                contactname: [
                            {
                                required: false,
                                message: '队伍联系人姓名',
                                trigger: 'blur'
                            }
                        ],
                                                landlinephone: [
                            {
                                required: false,
                                message: '队伍联系人电话',
                                trigger: 'blur'
                            }
                        ],
                                                contactphone: [
                            {
                                required: false,
                                message: '队伍联系人手机',
                                trigger: 'blur'
                            }
                        ],
                                                contactemail: [
                            {
                                required: false,
                                message: '队伍联系人邮箱',
                                trigger: 'blur'
                            }
                        ],
                                                address: [
                            {
                                required: false,
                                message: '队伍地址',
                                trigger: 'blur'
                            }
                        ],
                                                province: [
                            {
                                required: false,
                                message: '省',
                                trigger: 'blur'
                            }
                        ],
                                                city: [
                            {
                                required: false,
                                message: '市',
                                trigger: 'blur'
                            }
                        ],
                                                district: [
                            {
                                required: false,
                                message: '区县',
                                trigger: 'blur'
                            }
                        ],
                                                street: [
                            {
                                required: false,
                                message: '乡镇',
                                trigger: 'blur'
                            }
                        ],
                                                detailedaddress: [
                            {
                                required: false,
                                message: '详细地址',
                                trigger: 'blur'
                            }
                        ],
                                                longitude: [
                            {
                                required: false,
                                message: '详细地址经度',
                                trigger: 'blur'
                            }
                        ],
                                                latitude: [
                            {
                                required: false,
                                message: '详细地址维度',
                                trigger: 'blur'
                            }
                        ],
                                                scale: [
                            {
                                required: false,
                                message: '人员规模',
                                trigger: 'blur'
                            }
                        ],
                                                officialstaff: [
                            {
                                required: false,
                                message: '正式人员',
                                trigger: 'blur'
                            }
                        ],
                                                registrationdate: [
                            {
                                required: false,
                                message: '队伍登记日期',
                                trigger: 'blur'
                            }
                        ],
                                                contactnumber: [
                            {
                                required: false,
                                message: '队伍联络编号',
                                trigger: 'blur'
                            }
                        ],
                                                howjoin: [
                            {
                                required: false,
                                message: '加入方式',
                                trigger: 'blur'
                            }
                        ],
                                                establishmentdate: [
                            {
                                required: false,
                                message: '成立日期',
                                trigger: 'blur'
                            }
                        ],
                                                contactorganization: [
                            {
                                required: false,
                                message: '联络组织',
                                trigger: 'blur'
                            }
                        ],
                                                registrationauthority: [
                            {
                                required: false,
                                message: '登记机关',
                                trigger: 'blur'
                            }
                        ],
                                                teamprofile: [
                            {
                                required: false,
                                message: '队伍简介',
                                trigger: 'blur'
                            }
                        ],
                                                projectname: [
                            {
                                required: false,
                                message: '发起项目名称',
                                trigger: 'blur'
                            }
                        ],
                                                createdate: [
                            {
                                required: false,
                                message: '创建日期时间戳',
                                trigger: 'blur'
                            }
                        ],
                                    }
                return formRules
            }
        },


        created() {
            if (process.browser) {
                this.listPage()
            }
        },
        methods: {
            // 打开字新增窗口
            openCreate() {
                this.formData = {}
                this.createDialogVisible = true
            },
            // 提交表单
            doCreate() {
                this.$refs['createForm']
                        .validate( (valid) => {
                if (valid) {
                this.btnLoading = true
                this.$axios
                .$post(API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_CREATE, this.formData)
                .then((d) => {
                this.btnLoading = false
                if (d.code === 0) {
                this.$message({
                message: d.msg,
                type: 'success'
                })
                this.createDialogVisible = false
                this.listPage()
                }
                })
                }
                })
            },
            // 打开修改窗口
            openUpdate(row) {
                this.editData.id = row.id
                this.$axios.$post(API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_GET, this.editData).then((d) => {
                    if (d.code === 0) {
                        this.formData = d.data
                        this.updateDialogVisible = true
                    }
                })
            },
            // 打开详情窗口
            openShow(row) {
                this.editData.id = row.id
                this.$axios.$post(API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_GET, this.editData).then((d) => {
                    if (d.code === 0) {
                        this.formData = d.data
                        this.showDialogVisible = true
                    }
                })
            },
            // 提交表单
            doUpdate() {
                this.$refs['updateForm']
                        .validate((valid) => {
                if (valid) {
                this.btnLoading = true
                this.$axios
                .$post(API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_UPDATE, this.formData)
                .then((d) => {
                this.btnLoading = false
                if (d.code === 0) {
                this.$message({
                message: d.msg,
                type: 'success'
                })
                this.updateDialogVisible = false
                this.listPage()
                }
                })
                }
                })
            },
            // 执行删除
            openDelete(row) {
                this.editData.id = row.id
                this.$confirm(
                        '确定删除该条数据 ？',
                        '操作提示',
                        {
                            confirmButtonText: '确 定',
                            cancelButtonText: '取 消',
                            type: 'warning'
                        }
                ).then(() => {
                    this.btnLoading = true
                    this.$axios
                            .$post(API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_DELETE, this.editData)
                            .then((res) => {
                                this.btnLoading = false
                                if (res.code === 0) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    })
                                    this.listPage()
                                }
                            })
                }).catch(() => {})
            },
            // 页码变动事件
            doChangePage(val) {
                this.pageData.pageNo = val
                this.listPage()
            },
            // 页大小变动事件
            doSizeChange(val) {
                this.pageData.pageSize = val
                this.listPage()
            },
            // 页排序事件
            doPageSort(column) {
                this.pageData.pageOrderName = column.prop
                this.pageData.pageOrderBy = column.order
                this.listPage()
            },
            // 获取分页查询数据
            listPage() {
                this.listLoading = true
                this.$axios.$post(API_FETCHDATA_SPIDER_VOLUNTEER_TEAM_LIST, this.pageData).then((res) => {
                    this.listLoading = false
                    if (res.code === 0) {
                        this.listData = res.data.list
                        this.pageData.totalCount = res.data.totalCount
                    }
                })
            },
            // 条件查询展示第一页内容
            doSearch() {
                this.pageData.pageNo = 1
                this.listPage()
            },
            doReSearch() {
                this.pageData = {
                    pageNo: 1,
                    pageSize: 10,
                    totalCount: 0,
                    pageOrderName: 'createdAt',
                    pageOrderBy: 'descending'
                }
                this.$refs['searchForm'].resetFields()
            },
            changeSearch() {
                this.showSearch = !this.showSearch
            }
        }
    }

</script>
